<template>
	<view class="container">
		<button class="section_header" @click="onDateClick">{{start_date}} 至 {{end_date}}</button>
		<view class="list">
			<view v-for="(item, index) in list" :key="index" class="item">
				<view class="row">
					<view class="p">
						<text>{{item.title}}</text>
					</view>
					
					<view class="p">
						<text>{{'￥'+item.cash}}</text>
					</view>
				</view>
				
				<view class="row">
					<view class="i">
						<text>{{item.add_time}}</text>
					</view>
					
					<view class="b" v-if="item.status==1">
						<text>审核中</text>
					</view>
					
					<view class="b" v-if="item.status==10">
						<text>交易成功</text>
					</view>
					
					<view class="err" v-if="item.status==-10" @click="onErrorClick(item)">
						<text>交易失败</text>
						<image src="../../../static/fanli/50.png" mode="" class="icon"></image>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="loadingMore ? 'loading' : ''"></uni-load-more>
		
		<w-picker 
		    mode="range" 
		    startYear="2019" 
		    :endYear="endYear" 
		    ref="picker" 
			:defaultVal="defaultVal"
		    themeColor="#f00"
			@confirm="onPickerConfirm" 
		>
		</w-picker>
	</view>
</template>

<script>
	import { 
		runWithdrawalList
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import wPicker from "@/components/w-picker/w-picker.vue";
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		components: {
			uniLoadMore,
			wPicker
		},
		
		data() {
			return {
				start_date: 0,
				end_date: 0,
				defaultVal: [0,0,0,0,0,0,0],
				endYear: 2019,
				page: 1,
				list: [],
				loadingMore: true,
				isEmpty: false,
				loaded: false
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onLoad() {
			let _t = this
			let date = new Date()
			let yy = date.getFullYear()
			let mm = date.getMonth()+1
			let dd = date.getDate()
			
			this.endYear = yy
			this.defaultVal = [yy - 2019 , mm - 1, 0, 0, yy - 2019, mm - 1, dd - 1]
			
			if(mm < 10) mm = '0'+ mm
			if(dd < 10) dd = '0'+ dd
			
			this.start_date = yy + '-' + mm + '-01'
			this.end_date = yy + '-' + mm + '-' + dd
			
			this.getPageData()
		},
		
		onReachBottom() {
			if(this.loadingMore)return false
			if(this.isEmpty)return false
			if(!this.loaded)return false
			
			this.page ++
			this.loadingMore = false
			
			this.getPageData()
		},
		
		methods:{
			onPickerConfirm (e) {
				console.log(e)
				this.start_date = e.from
				this.end_date = e.to
				this.list = []
				this.page = 1
				this.loadingMore = true
				this.isEmpty = false
				this.getPageData()
			},
			
			onDateClick () {
				this.$refs.picker.show()
			},
			
			onErrorClick (item) {
				
				item.status_msg && uni.showModal({
					content: item.status_msg.sub_msg,
					showCancel: false
				})
			},
			
			getPageData () {
				let _t = this
				let stime = (new Date(this.start_date).getTime())/1000;
				let etime = (new Date(this.end_date).getTime()+86400000)/1000;

				stime = stime - 28800;
				etime = etime - 28800;
				
				runWithdrawalList({
					params: {
						uid: this.userInfo.id,
						page: this.page,
						stime: stime,
						etime: etime,
					},
					success: res => {
						_t.isEmpty = res.data.length < 10
						_t.list = _t.list.concat(res.data)
						_t.loadingMore = false
						_t.loaded = true
					},
					fail: res => {
						_t.isEmpty = true
						_t.loadingMore = false
						_t.loaded = true
					},
					error: () => {
						_t.isEmpty = true
						_t.loadingMore = false
						_t.loaded = true
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.section_header{
		height: 92px;
		line-height: 92px;
		text-align: center;
		background: #f7f7f7;
		font-size: 30px;
		color: #333333;
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;
	}
	
	.list{
		
		.item{
			border-bottom: 1px solid #e6e6e6;
			padding: 20px 30px;
			
			.row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 6px 0;
				
				.p{
					font-size: 30px;
					color: #333333;
				}
				
				.i{
					font-size: 24px;
					color: #999999;
				}
				
				.b{
					font-size: 24px;
					color: #61ADFF;
				}
				
				.err{
					font-size: 24px;
					color: #E7261F;
					display: flex;
					align-items: center;
					
					.icon{
						width: 24px;
						height: 24px;
						margin-left: 10px;
					}
				}
			}
		}
	}
</style>
